import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class GamePage extends StatefulWidget{
  @override
  _GamePageState createState() {
    // TODO: implement createState
    return _GamePageState();
  }
}
class _GamePageState extends State<GamePage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    return  MyScrollView();
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

//整个页面是appbar+customscrollview的组合，因为appbar的文字会因为下方的customscrollview的滑动而变化，所以把他们放到同一个widget里面
class MyScrollView extends StatefulWidget{
  @override
  _MyScrollViewState createState() {
    return _MyScrollViewState();
  }
}
class _MyScrollViewState extends State<MyScrollView>{
  //定义滑动的控制器
  ScrollController controller;
  //设置是否显示appbar文字的开关
  bool showTitle;
  @override
  void initState() {
    super.initState();
    showTitle=false;
    //初始化控制器
    controller=ScrollController();
    //设置控制监听器，当滑动的距离超过40的时候将showtitle设为true
    controller.addListener((){
      // print(controller.position.pixels);
      setState(() {
        showTitle=controller.position.pixels>=40;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //根据showtitle的值来设置显示的文字和elevation(深度)
        title: showTitle==true?Text("游戏"):Text(""),
        elevation: showTitle==true?1:0,
      ),
      body: Container(
        color: Colors.white,
        child: CustomScrollView(
        controller: controller,
        slivers: <Widget>[
          //在SliverToBoxAdapter中放入头部
          SliverToBoxAdapter(
            child: TitleBar(
              title:"游戏"
            ),
          ),
          //列表
          SliverList(
            delegate: SliverChildBuilderDelegate((context,index){
              // return Text("item${index}");
              return Games_swiper();
            },
            childCount: 4
            ),
          )
        ],
      ),
      ),
    );
  }
}
//头部
class TitleBar extends StatelessWidget{
  String title;
  TitleBar({this.title});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          //标题
          titleWidget(title),
          //横向swiper
          ListItem(),
        ],
      ),
    );
  }
}
//头部组件
Widget titleWidget(String title){
  return Container(
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 0.3,
                  color: Colors.grey
                )
              )
            ),
            padding: EdgeInsets.only(bottom: 10),
            margin: EdgeInsets.only(left:20,right: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("${title}",style: TextStyle(fontSize: 30,fontWeight: FontWeight.w700),),
                GestureDetector(
                  onTap: (){

                  },
                  child: Image.asset("images/person.png",width: 35,),
                )
              ],
            ),
          );
}
//列表item
class ListItem extends StatefulWidget{
  @override
  _ListItemState createState() {
    return _ListItemState();
  }
}
class _ListItemState extends State<ListItem>{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 320,
      child: Swiper(
        loop: false,
        viewportFraction: 0.9,
        itemBuilder: (context,index){
          return Container(
            padding: EdgeInsets.only(top: 10,bottom: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                //描述
                Text("限时特惠",style: TextStyle(color: Color.fromRGBO(0, 122, 255, 1),fontSize: 12),),
                Text("永远的龙珠",style: TextStyle(fontSize: 20),),
                Text("畅想《龙珠》游戏、漫画和动画",style: TextStyle(fontSize: 20,color: Color.fromRGBO(142, 142, 146, 1)),),
                //图片
                Container(
                  margin: EdgeInsets.only(left: 0,right: 15,top: 5),
                  child: AspectRatio(
                    aspectRatio: 16/9,
                    child: ClipRRect(
                      borderRadius:BorderRadius.circular(5),
                      child: Image.asset("images/ban_lz.png",fit: BoxFit.cover,),
                    ),
                  ),
                )
              ],
            ),
          );
        },
        itemCount: 4,
      ),
    );
  }
}

//分类swiper
//分析：上下两部分，上面是分类标签和查看全部按钮，下方是swpier
class Games_swiper extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Column(
        children: <Widget>[
          //头部
          Container(          
            padding: EdgeInsets.only(left: 20,right: 40),
            child: Container(
              padding: EdgeInsets.only(top: 5),
              decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        width: 0.3,
                        color: Colors.grey
                      )
                    )
                  ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("热门游戏",style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500),),
                  GestureDetector(
                    child: Text("查看全部",style: TextStyle(color: Colors.blue,fontSize: 16),),
                    onTapUp: (DragDownDetails){

                    },
                  )
                ],
              ),
            ),
          ),
          //swiper
          Container(
            margin: EdgeInsets.only(bottom: 15),
            height: 230,
            child: Swiper(
              viewportFraction: 0.9,
              itemBuilder: (context,index){
                return Games_items();
              },
              itemCount: 7,
              loop: false,
            ),
          )
        ],
      ),
    );
  }
}
//单个swiper包含的内容
class Games_items extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (context,index){
          return Games_item(index);
        },
        itemCount: 3,
      ),
    );
  }
}
//单个game
class Games_item extends StatelessWidget{
  int index;
  Games_item(this.index);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(top: 5,bottom: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          //左侧图标和描述
          Container(
            height: 60,
            width: 60,
            margin: EdgeInsets.only(right: 10),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(14),
              child: Image.asset("images/ban_lz.png",fit: BoxFit.cover,),
            ),
          ),
          //右侧描述和按钮
          Expanded(
            child: Container(
              padding: EdgeInsets.only(bottom: 5),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    width: 0.3,
                    color: index==2?Colors.transparent:Colors.grey
                  )
                )
              ),
              margin: EdgeInsets.only(right: 10),
              child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text("时空猎人",maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 18,fontWeight: FontWeight.w300,color: Colors.black,),),
                        Text("经典格斗手游",style: TextStyle(fontSize: 14,color: Colors.grey),),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 20),
                    child: Column(
                      children: <Widget>[
                        GestureDetector(
                          child: Container(
                            padding: EdgeInsets.only(left: 20,top: 2,right: 20,bottom: 2),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Color.fromRGBO(241, 240, 247, 1)
                            ),
                            child: Text("获取",style: TextStyle(color: Colors.blue,fontSize: 16),),
                          ),
                        ),
                        Text("App内购买项目",style: TextStyle(fontSize: 10,color: Colors.grey),)
                      ],
                    ),
                  ),
                ],
              )
            ),
          )
        ],
      ),
    );
  }
}